<!--
 * @description: 应用模块
 * @Date: 2023-01-28 12:13:39
 * @example: 应用详情
 * @params:
-->
<template>
  <link
    href="https://fonts.googleapis.com/css?family=Chakra Petch"
    rel="stylesheet"
  />
  <div class="content_inner">
    <div
      class="space"
      v-for="(item, index) in SpaceList"
      :key="index"
      ref="deviceWidth"
      @click="handleDetail(item)"
    >
      <div class="image">
        <img :src="item.imgKey" alt="" :class="!item.imgKey ? 'spc_img' : ''" />
        <span v-if="item.type" class="spaceGroupType">{{ item.type }}</span>
        <!-- <div class="icon" v-if="btnEnable"></div> -->
        <!-- <div class="icon">
                <Dropdown
                  slot="extra"
                  placement="bottom-end"
                  trigger="click"
                  @click.native="(e) => handleClick(e)"
                >
                  <a href="javascript:void(0)">
                    <Icon type="ios-more" color="#fff" size="25" />
                  </a>
                  <DropdownMenu slot="list">
                    <DropdownItem
                      name="unInstall"
                      class="edit"
                      @click.native="(e) => handleEdit(e, item)"
                      >Edit</DropdownItem
                    >
                    <DropdownItem
                      name="unInstall"
                      @click.native="(e) => handleDelete(e, item)"
                      >Delete</DropdownItem
                    >
                  </DropdownMenu>
                </Dropdown>
              </div> -->
      </div>
      <div class="information">
        <div class="space_name">
          <el-tooltip
            class="box-item"
            effect="dark"
            content="Top Center prompts info"
            placement="top"
          >
            <h2 style="font-size: 16px">{{ item.name }}</h2>
          </el-tooltip>
        </div>
        <div class="space_date">{{ item.creationTime }}</div>
        <div
          :class="
            item.status === 'Published'
              ? 'btn_forward green'
              : 'btn_forward yellow'
          "
        >
          <div>
            <el-icon><Right /></el-icon>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";

const route = useRouter();
const SpaceList = [
  // {
  //   imgKey:
  //     "https://kai-zhang.oss-cn-hangzhou.aliyuncs.com/image/banner%222023-02-27T08%3A01%3A59.330Z%22.jpg",
  //   type: "duck",
  //   name: "忍者鸭",
  //   creationTime: "2023-02-22 07:27:32",
  //   status: "Published",
  // },
  // {
  //   imgKey:
  //     "https://kai-zhang.oss-cn-hangzhou.aliyuncs.com/image/banner%222023-02-27T08%3A02%3A09.774Z%22.jpg",
  //   type: "duck",
  //   name: "隐形鸭",
  //   creationTime: "2023-02-22 07:27:32",
  //   status: "Published",
  // },
  // {
  //   imgKey:
  //     "https://kai-zhang.oss-cn-hangzhou.aliyuncs.com/image/banner%222023-02-27T08%3A02%3A22.134Z%22.jpg",
  //   type: "goose",
  //   name: "警长鹅",
  //   creationTime: "2023-02-22 07:27:32",
  //   status: "Published",
  // },
  {
    imgKey: require("@/assets/EM300-ZLD.png"),
    type: "EM300-ZLD",
    name: "EM300-ZLD 水浸传感器",
    creationTime: "2023-02-22 07:27:32",
    status: "Published",
  },
  {
    imgKey: require("@/assets/AM103.png"),
    type: "AM103",
    name: "AM103 IAQ",
    creationTime: "2023-02-22 07:27:32",
    status: "Published",
  },
  {
    imgKey: require("@/assets/EM500-CO2.png"),
    type: "EM500-CO2",
    name: "EM500-CO2 IAQ",
    creationTime: "2023-02-22 07:27:32",
    status: "Published",
  },
  {
    imgKey: require("@/assets/EM500-SWL.png"),
    type: "EM500-SWL",
    name: "EM500-SWL",
    creationTime: "2023-02-22 07:27:32",
    status: "Published",
  },
];
const handleDetail = (item) => {
  route.push({name:"SensorInfo",params:{
    title:item.name
  }});
};
</script>
<style scoped lang="less">
.content_inner {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  .space {
    // width: 324px;
    // max-width: 324px;
    margin-right: 30px;
    width: 18%;
    // height: 300px;
    margin-bottom: 30px;
    background: linear-gradient(
      270deg,
      rgba(26, 31, 30, 0.95),
      rgba(28, 28, 28, 0.44)
    );
    border-radius: 5px;
    box-shadow: 0px 0px 5px 1px #000000;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    justify-content: space-between;
    &:hover {
      box-shadow: unset;
      background: linear-gradient(
        90deg,
        rgba(20, 49, 46, 0.95),
        rgba(28, 28, 28, 0.44)
      );
      .image img {
        //transform: scale(1.5);
        opacity: 1;
      }
      .image .spaceGroupType {
        background-color: #ffd700;
        color: #000000;
      }
    }
    // &:active {
    //   transition: all 0.1s ease-in-out;
    //   opacity: 0.5;
    // }
    .image {
      overflow: hidden;
      position: relative;
      width: 100%;
      height: 200px;
      background: rgba(2, 18, 18, 0.8);

      .spaceGroupType {
        font-size: 12px;
        font-weight: bold;
        letter-spacing: 1px;
        color: #ffd700;
        border: 1px solid #ffd700;
        background-color: #ffd70000;
        border-radius: 3px;
        padding: 0px 10px;
        position: absolute;
        bottom: 3%;
        right: 3%;
        backdrop-filter: blur(50px);
        transition: all 0.3s ease-in-out;
      }

      img {
        width: 100%;
        height: 100%;
        //max-height: 50%;
        transition: all 0.3s ease-in-out;
        margin: auto;
        opacity: 0.5;
        filter: drop-shadow(3px 3px 1px #000000);
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        display: block;
        object-fit: cover;
      }
      .spc_img {
        width: 40%;
        //height: 50%;
        max-width: 40%;
        height: auto;
      }
      .space_type {
        position: absolute;
        bottom: 0;
        right: 2%;

        h2 {
          font-size: 2em;
          font-weight: bold;
          color: #ffffff90;
          font-style: italic;
        }
      }
      .Status {
        position: absolute;
        left: 12px;
        top: 8px;
        font-weight: 500;
        font-size: 16px;
        color: #22ffe5;
      }
      .Status.Draft {
        color: #ffd700;
      }
      .icon {
        position: absolute;
        right: 12px;
        top: 8px;
        font-weight: 500;
        font-size: 16px;
        color: #fff;
      }
    }
    .information {
      // height: 25%;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding: 10px 20px;
      position: relative;
      .space_name {
        color: #fff;
        .ivu-tooltip {
          width: 100%;
        }
        h2 {
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .space_title {
      }

      .space_date {
        color: #ffffff80;
        font-style: italic;
        font-weight: bold;
      }

      .btn_forward {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 50px;
        height: 50px;
        background: linear-gradient(315deg, #ffd700 50%, #00000000 50%);
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        color: #000000 !important;
        font-size: 18px !important;
        font-weight: bold !important;
        padding-right: 5px;
        padding-bottom: 3px;
        transition: all 0.3s ease-in-out;
      }
      .btn_forward.green {
        background: linear-gradient(315deg, #2b3635 50%, #00000000 50%);
      }
      .btn_forward.yellow {
        background: linear-gradient(315deg, #dfc42c 50%, #00000000 50%);
      }
    }
    &:nth-child(6n) {
      margin-right: 0px;
    }
  }
}
</style>
